<template>
  <div class="flex flex-col gap-3 flex-1">
    <!-- 顶部统计卡片 -->
    <div class="grid grid-cols-4 gap-3">
      <el-card v-for="stat in statistics" :key="stat.label" shadow="hover">
        <div class="flex items-center justify-between">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm">{{ stat.label }}</span>
            <span class="text-2xl font-bold mt-2" :class="stat.color">{{ stat.value }}</span>
          </div>
          <el-icon :size="40" :class="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 搜索条件 -->
    <div class="bg-white p-4 rounded-lg">
      <el-form :inline="true" :model="searchForm" class="flex flex-wrap gap-3">
        <el-form-item label="预约状态：" class="w-1/6 mb-0">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="待就诊" value="pending" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
            <el-option label="已爽约" value="missed" />
          </el-select>
        </el-form-item>
        <el-form-item label="就诊科室：" class="w-1/6 mb-0">
          <el-select v-model="searchForm.department" placeholder="请选择科室" clearable>
            <el-option
              v-for="dept in departments"
              :key="dept.id"
              :label="dept.name"
              :value="dept.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="就诊医生：" class="w-1/6 mb-0">
          <el-select v-model="searchForm.doctor" placeholder="请选择医生" clearable>
            <el-option
              v-for="doctor in doctors"
              :key="doctor.id"
              :label="doctor.name"
              :value="doctor.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间：" class="w-1/6 mb-0">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="关键词：" class="w-1/6 mb-0">
          <el-input
            v-model="searchForm.keyword"
            placeholder="患者姓名/手机号"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="w-1/6 mb-0">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 预约记录表格 -->
    <div class="bg-white p-4 rounded-lg">
      <div class="flex justify-between mb-4">
        <div class="text-lg font-bold">预约记录列表</div>
        <div class="flex gap-2">
          <el-button type="success" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出记录
          </el-button>
        </div>
      </div>

      <el-table :data="records" border stripe>
        <el-table-column prop="patientName" label="患者姓名" min-width="120" />
        <el-table-column prop="department" label="就诊科室" min-width="120" />
        <el-table-column prop="doctor" label="就诊医生" min-width="120" />
        <el-table-column prop="visitTime" label="就诊时间" min-width="160" />
        <el-table-column prop="fee" label="挂号费" min-width="100">
          <template #default="{ row }">
            ￥{{ row.fee }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="200">
          <template #default="{ row }">
            <el-button 
              v-if="row.status === 'pending'"
              type="primary" 
              link 
              @click="handleCheckIn(row)"
            >
              登记到诊
            </el-button>
            <el-button 
              v-if="row.status === 'pending'"
              type="warning" 
              link 
              @click="handleCancel(row)"
            >
              取消预约
            </el-button>
            <el-button type="info" link @click="handleViewDetail(row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <Pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 详情对话框 -->
    <Drawer
      v-model="showDetailDialog"
      title="预约详情"
      size="40%"
      :isShowConfirm="false"
    >
      <div v-if="selectedRecord">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="预约号" :span="3">
            {{ selectedRecord.reservationNo }}
          </el-descriptions-item>
          <el-descriptions-item label="患者姓名">
            {{ selectedRecord.patientName }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ selectedRecord.gender }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ selectedRecord.age }}岁
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ selectedRecord.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ selectedRecord.idCard }}
          </el-descriptions-item>
          <el-descriptions-item label="医保类型">
            {{ selectedRecord.insuranceType }}
          </el-descriptions-item>
          <el-descriptions-item label="就诊科室">
            {{ selectedRecord.department }}
          </el-descriptions-item>
          <el-descriptions-item label="就诊医生">
            {{ selectedRecord.doctor }}
          </el-descriptions-item>
          <el-descriptions-item label="就诊时间">
            {{ selectedRecord.visitTime }}
          </el-descriptions-item>
          <el-descriptions-item label="预约方式">
            {{ selectedRecord.method }}
          </el-descriptions-item>
          <el-descriptions-item label="预约时间">
            {{ selectedRecord.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="预约状态">
            <el-tag :type="getStatusType(selectedRecord.status)">
              {{ getStatusLabel(selectedRecord.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="预约备注" :span="3">
            {{ selectedRecord.remark }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="mt-3">
          <div class="font-bold mb-2">就诊记录</div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in selectedRecord.activities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Download, Calendar, User, Money, Warning } from '@element-plus/icons-vue'
import Drawer from '@/components/common/Drawer.vue'
import Pagination from '@/components/common/Pagination.vue'
// 统计数据
const statistics = ref([
  {
    label: '今日预约',
    value: '128',
    icon: 'Calendar',
    color: 'text-blue-500',
    iconColor: 'text-blue-200'
  },
  {
    label: '待就诊',
    value: '45',
    icon: 'User',
    color: 'text-green-500',
    iconColor: 'text-green-200'
  },
  {
    label: '已完成',
    value: '￥12,600',
    icon: 'Money',
    color: 'text-orange-500',
    iconColor: 'text-orange-200'
  },
  {
    label: '爽约率',
    value: '2.5%',
    icon: 'Warning',
    color: 'text-red-500',
    iconColor: 'text-red-200'
  }
])

// 科室和医生数据
const departments = ref([
  { id: '1', name: '内科' },
  { id: '2', name: '外科' },
  { id: '3', name: '儿科' }
])

const doctors = ref([
  { id: '1', name: '张医生' },
  { id: '2', name: '李医生' },
  { id: '3', name: '王医生' }
])

// 搜索表单
const searchForm = ref({
  status: '',
  department: '',
  doctor: '',
  dateRange: [],
  keyword: ''
})

// 预约记录数据
const records = ref([
  {
    id: '1',
    reservationNo: 'R202403150001',
    patientName: '张三',
    department: '内科',
    doctor: '李医生',
    visitTime: '2024-03-15 09:30',
    fee: 50,
    status: 'pending',
    createTime: '2024-03-14 15:30',
    method: '网上预约',
    patientInfo: '男，35岁',
    phone: '13800138000',
    insuranceType: '社会医疗保险',
    remark: '反复咳嗽一周',
    gender: '男',
    age: 35,
    idCard: '110101199001011234',
    activities: [
      {
        time: '2024-03-14 15:30',
        content: '创建预约',
        type: 'primary'
      },
      {
        time: '2024-03-14 15:35',
        content: '支付挂号费',
        type: 'success'
      }
    ]
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(records.value.length)

// 详情对话框
const showDetailDialog = ref(false)
const selectedRecord = ref(null)

// 状态处理函数
const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    completed: 'success',
    cancelled: 'info',
    missed: 'danger'
  }
  return types[status]
}

const getStatusLabel = (status) => {
  const labels = {
    pending: '待就诊',
    completed: '已完成',
    cancelled: '已取消',
    missed: '已爽约'
  }
  return labels[status]
}

// 方法
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const handleReset = () => {
  searchForm.value = {
    status: '',
    department: '',
    doctor: '',
    dateRange: [],
    keyword: ''
  }
}

const handleExport = () => {
  ElMessage.success('导出功能待实现')
}

const handleCheckIn = (row) => {
  ElMessageBox.confirm('确认患者到诊？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'completed'
    ElMessage.success('登记成功')
  })
}

const handleCancel = (row) => {
  ElMessageBox.confirm('确定取消该预约吗？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'cancelled'
    ElMessage.success('取消成功')
  })
}

const handleViewDetail = (row) => {
  selectedRecord.value = row
  showDetailDialog.value = true
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>